


.view {
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 2;
  height: 100vh;
  background-color: white;
  position: relative;
  padding-top: 1.8rem;
  box-sizing: border-box;
  overflow: hidden;
  background-image: url(../../../assets/img/base.png);
  .pannal {
    width: 3.15rem;
    margin: 0 auto;
    height: 3rem;
    background-color: rgb(160, 219, 254);
    border-radius: 0.2rem;
    border: 2px solid rgb(100, 100, 100);
    padding: 0.1rem;
    box-sizing: border-box;
    .base {
      width: 100%;
      height: 100%;
      background: white;
      border-radius: 0.1rem;
      box-shadow: 0px 0px 16px rgba(7, 2, 3, 0.31);
      padding: 0px 0.23rem;
      position: relative;
      .clip {
        position: absolute;
        left: 50%;
        margin-left: -30px;
        margin-top: -220px;
      }
      .icon {
        padding-top: 0.25rem;
        text-align: center;
        img {
          display: inline-block;
        }
      }
      input {
        width: 1.7rem;
        line-height: 0.4rem;
        margin: 0.1rem auto;
        border: 1px solid rgb(150, 220, 220);
        border-radius: 0.2rem;
        text-align: center;
        display: block;
        font-size: 0.16rem;
      }
      button {
        width: 1.7rem;
        line-height: .4rem;
        display: block;
        margin: .1rem auto;
        border-radius: .3rem;
        background-color: #ff505a;
        border: none;
        color: #fff;
      }
    }
  }
}

.html-img {
    position: fixed;
    left: 0px;
    top: 0px;
    height: 120vh;
    width: 100%;
    background: white;
    padding:  0.2rem 0;
    .img-result {
        margin: 0 auto;
        display: block;
        width: 80%;
        // height: 85vh;
    }
    .box {
        position: fixed;
        z-index: -1;
        left: 3%;
        display: flex;
        flex-direction: column;
        width: 94%;
        margin: 0 auto;
        // padding: 0.1rem 0.1rem;
        border: 1px solid rgb(74, 77, 79);
        height: 100vh;
        border-radius: 0.1rem;
        background: -webkit-linear-gradient( rgb(149, 201, 240), rgb(141, 231, 248)); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient( rgb(149, 201, 240), rgb(141, 231, 248)); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient( rgb(149, 201, 240), rgb(141, 231, 248)); /* Firefox 3.6 - 15 */
        background: linear-gradient( rgb(149, 201, 240), rgb(141, 231, 248)); /* 标准的语法 */
        .top {
             padding: 0.1rem 0.1rem;
             height: 86%;
             .time {
                border: 1px solid black;
                margin-top: 0.05rem;
                display: flex;
                height: 0.2rem;
                font-size: 0.14rem;
                line-height: 0.2rem;
                div {
                    flex: 1;
                    text-align: center;
                    position: relative;
                    font-weight: 600;
                    span {
                        position: absolute;
                        right: 10px;
                        top: -10px;
                        display: block;
                        width: 30px;
                        background: rgb(149, 201, 240);
                    }
                }
                div:first-child {
                    border-right: 1px solid #000000;
                }
            }
            h1 {
                font-size: 0.32rem;
                text-align: center;
                margin-top: 0.15rem;
            }
            h2 {
                font-size: 0.32rem;
                text-align: center;
                margin-top: 0.15rem;
                color: white;
                height: 0.42rem;
                background: rgb(15, 221, 210);
                span {
                    font-size: 0.40rem;
                }
            }
            .title {
                background-size: 100% 100%;
                background-repeat: no-repeat;
                height: 1.12rem;
                text-align: center;
                position: relative;
                img{
                    position: absolute;
                    left: 0px;
                    top: 0px;
                    width: 100%;
                    height: 100%;
                    z-index: -1;
                }
                span {
                    font-size: 0.15rem;
                    padding-top: 0.25rem;
                    display: block;
                    text-align: center;
                }
                h3 {
                    margin-top: 0.15rem;
                    color: rgb(2, 178, 251);
                    font-size: 0.32rem;
                }
            }
            .people {
               img {
                    width: 70%;
               }
                margin-top: 0.2rem;
                text-align: center;
            }
        }
        
        .footer {
            flex: 1;
            background: white;
            border-radius: 0rem 0rem 0.1rem 0.1rem;
            .middle {
                padding-top: 0.1rem;
                height: 100%;
                width: 90%;
                // display: flex;
                margin: 0 auto;
                justify-content: space-between;
                &>img {
                    float: left;
                    width: 1rem;
                }
                .er-code {
                    float: right;
                }
            }
            .er-code {
                div {
                    // display: inline-block;
                    // display: flex;
                    p {
                        margin-top: 0.2rem;
                        float: left;
                        text-align: right;
                        margin-right: 0.1rem;

                    }
                    img {
                        float: left;
                    }
                }
                
                padding: 0 0.12rem;
                img {
                    width: 0.5rem;
                }
            }
            
        }
    }
    
}

.mask {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    z-index: 22;
    background-color: rgba(0, 0, 0, 0.7);
}
.mask-box {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    z-index: 23;
    .img {
        position: absolute;
        right: 8%;
        top: 0.4rem;
        text-align: center;
        color: white;
        font-size: 0.17rem;
        line-height: 0.24rem;
    }
    .bts {
        margin-top: 50vh;
    }
}

.bts {
    text-align: center;
    margin-top: 0.15rem;
    button:first-child {
        margin-right: 20px;
    }
    button {
        width: 116px;
        height: 26px;
        background: white;
        border: 1px solid #686868;
        border-radius: 4px;
        box-shadow: 0px 5px 0px #0fddd2;
    }
}



@media (device-width: 375px) and (-webkit-min-device-pixel-ratio:2){
    body {
        background: #0fddd2;
    }
}
@media (device-height: 736px) and (-webkit-min-device-pixel-ratio:2){
    body {
        background: red;
    }
}
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){
    body {
        background: blue;
    }
}